import 'package:flutter/material.dart';

class PinterestTextyDemo extends StatefulWidget {
  const PinterestTextyDemo({Key? key}) : super(key: key);

  @override
  _PinterestTextyDemoState createState() => _PinterestTextyDemoState();
}

class _PinterestTextyDemoState extends State<PinterestTextyDemo> {
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(primaryColor: Color.fromRGBO(55, 113, 170, 1.0)),
      child: Scaffold(
        appBar: AppBar(
          title: Text("Texty Navigation"),
        ),
        drawer: buildLeftMenu(),
      ),
    );
  }

  buildLeftMenu() {
    return Drawer(
        child: Stack(
      fit: StackFit.expand,
      children: [
        Container(
          color: Color.fromRGBO(55, 113, 170, 1.0),
          padding: EdgeInsets.only(top: 60),
          child: Column(
            children: [
              Expanded(
                child: makeProfileAvatar(),
                flex: 1,
              ),
              SizedBox(
                height: 5,
              ),
              Expanded(
                child: makeMenuGrid(),
                flex: 3,
              )
            ],
          ),
        ),
        const DecoratedBox(
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment(0.6, 0.9),
                  end: Alignment(0.0, 0.0),
                  colors: [Color(0x60ffffff), Color(0x00000000)])),
        )
      ],
    ));
  }

  makeProfileAvatar() {
    return Container(
      child: Column(
        children: [
          SizedBox(
            width: 100,
            height: 100,
            child: CircleAvatar(
              backgroundImage: NetworkImage(
                  "https://img1.baidu.com/it/u=558442588,3678075188&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=281"),
            ),
          ),
          SizedBox(
            height: 10,
          ),
          Text(
            "Shuaib Afegbua",
            style: TextStyle(
                color: Colors.white, fontSize: 28, fontWeight: FontWeight.bold),
          ),
          SizedBox(
            height: 5,
          ),
          Text(
            "Abuja,Nigeria",
            style:
                TextStyle(color: Colors.white.withOpacity(0.7), fontSize: 22),
          )
        ],
      ),
    );
  }

  makeMenuGrid() {
    List<MenuItem> list = [
      MenuItem(
        Icons.message,
        "Message",
      ),
      MenuItem(
        Icons.call_rounded,
        "Calls",
      ),
      MenuItem(
        Icons.dialpad_sharp,
        "Dial",
      ),
      MenuItem(
        Icons.contacts_sharp,
        "Contacts",
      ),
      MenuItem(
        Icons.more_horiz_sharp,
        "More",
      ),
      MenuItem(
        Icons.settings,
        "Settings",
      ),
    ];
    return GridView.builder(
      gridDelegate:
          SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
      itemBuilder: (context, index) {
        var inf = list[index];
        return Container(
          child: Column(
            children: [
              Icon(
                inf.icon,
                color: Colors.white,
                size: 40,
              ),
              SizedBox(
                height: 10,
              ),
              Text(
                "${inf.title}",
                style: TextStyle(color: Colors.white, letterSpacing: 3),
              )
            ],
          ),
        );
      },
      itemCount: list.length,
    );
  }
}

class MenuItem {
  IconData icon;
  String title;

  MenuItem(this.icon, this.title);
}
